<template>
    <div style="background-color: aliceblue;">
        <h1>我是父组件，这个底色的都是我，其他颜色都是我的子组件</h1>
        <h2>1.注册局部组件</h2>
        <ButtonCounter></ButtonCounter>
        <h2>2.使用kebab-case注册组件</h2>
        <button-counter></button-counter>
        <h3>同一个组件被多次调用时,各自的数组都是独立的</h3>
        <h2>3 注册全家组件</h2>
        <h3>全局组件在main.js中注册，我们在这个页面中只要进行调用即可</h3>
        <DoubleCounter></DoubleCounter>
        <h2>4. 组件可以重复按需进行调用</h2>
        <HelloView name="辛耶"></HelloView>
        <HelloView name="莱顿"></HelloView>
        <HelloView name="赛欧特"></HelloView>
        <HelloView name="安琪"></HelloView>
        <h2>5. 动态组件</h2>
        <h3>使用component实现动态组件，
            他允许开发人员在不同的场景下灵活地渲染不同的组件，
            具体应用场景，查阅教程项目四任务二
        </h3>
        <input type="radio" v-model="dengLu" value="DengLu2">微信登陆
        <input type="radio" v-model="dengLu" value="DengLu">手机登陆
        <component :is="dengLu"></component>
        <h2>6. 带缓存的导航文件</h2>
        <button @click="currentTab='TDao1'">冰淇淋</button>
        <button @click="currentTab='TDao2'">蛋糕</button>
        <button @click="currentTab='TDao3'">蜡烛</button>
        <!-- keep-alive 可以缓存组件状态 -->
         <keep-alive>
            <component :is="currentTab"></component>
         </keep-alive>
         <h2>7. 异步组件，可以保证系统的稳定和相应</h2>
         <h3>suspense内置组件，来协调组件树中嵌套的异步以来。他有俩个插槽：<br>
            一个是default插槽，一个是fallback插槽。default中的内容是当该插槽中的组件可以显示则显示，<br>
            不能现在则显示fallback中内容
        </h3>
        <Suspense>
            <template v-slot:default>
                <div>
                    <DelayConn></DelayConn>
                </div>
            </template>
            <template v-slot:fallback>
                <div>
                    <h2>Loading........</h2>
                </div>
            </template>
        </Suspense>
        <h2>8. props实现父组件和子组件通信,通过$emit实现子组件与父组件通信</h2>
        <SonOne toSon="我的钻头可是突破天际的啊" @score="dadHandle"></SonOne>
        <h3>注意：无论数据传递的是何种形式，传递的都是字符串，可以使用v-bind来动态绑定属性，
            实现通过变量来传递数据
        </h3>
        <h2>9. props对象用法</h2>
        <h3>可以为组件的props指定严重要求。例如指定数据类型，如果传递的数据类型不符合要求，会发出警告</h3>
        <SonTwo :name1="name1" :age="age" :gender="gender" :hobby="hobby"></SonTwo>
        <h2>10. props数据是单向的</h2>
        <h3>父组件的数据有可能也会传递给其他子组件，如果被其中一个子组件修改了数据，则会影响其他子组件</h3>
        <h3>如果子组件想要在自己的作用域里面修改父组件传递过来的数据，就要在子组件data中另外定义一个变量，引用父组件传递过来的props值</h3>
        <h2>给孩子一个大大钻头</h2><SonOne :wid="wid"/>
        <h2>11. 通过$ref实现父组件与子组件的通信</h2>
        <h3>$ref是vue提供的一个内置的对象，拥有已使用ref属性并成功注册的所有元素和组件
            通过$ref可以直接访问DOM元素或者子组件实例，使得父子组件进行通信。
        </h3>
        <button @click="sendMessage()">奶奶说</button>
        <SonOne ref="childRef"></SonOne>
        <h2>12. provide和inject实现组件通信</h2>
        <h3>非父子组件通信包括兄弟组件和跨多级组件的通信。provide和inject是用于实现俩个组件通信的选项</h3>
        <h3>provide选项允许父组件向其所有子组件注入一些数据和方法，这个注入的数据和方法对于父组件来说是全局的，
            可以在子组件中通过inject选项获取和使用
        </h3>
        <SonThree></SonThree>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
</template>

<script>

import ButtonCounter from '../components/ButtonCounter.vue';
import HelloView from '@/components/HelloView.vue';
import DengLu from '@/components/DengLu.vue';
import DengLu2 from '@/components/DengLu2.vue';
import TDao2 from '@/components/DaoHang/TDao2.vue';
import TDao3 from '@/components/DaoHang/TDao3.vue';
import TDao1 from '@/components/DaoHang/TDao1.vue';
import DelayConn from './DelayConn.vue';
import SonOne from '@/components/SonOne.vue';
import SonTwo from '@/components/SonTwo.vue';
import SonThree from '@/components/SonThree.vue';

export default {
    components:{
        ButtonCounter,
        HelloView,
        DengLu,
        DengLu2,
        TDao2,
        TDao3,
        TDao1,
        DelayConn,
        SonOne,
        SonTwo,
        SonThree
    },  
    data() {
        return {
            name:'',
            dengLu:'',
            currentTab:'TDao1',
            name1:'红莲',
            age:[],
            // gender:'',
            // hobby:[],
            wid:200,

        }
    },
    methods: {
        dadHandle(val){
            alert("我们可是"+val+"啊啊！！！！！")
        },
        sendMessage(){
            this.$refs.childRef.receiveMessage("命运绝对会站在我这一边的")
        }
    },
    provide:{
        message:'我喊你一声，你敢答应吗？FatherOne'
    },
}
</script>